import React, { useSTate, useRef, useEffect } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Card, Alert, Typography } from 'antd';
import { useIntl, FormattedMessage } from 'umi';
// import { Label } from '_bizcharts@3.5.9@bizcharts';
import styles from './index.less';

let BMap = window.BMap;
//创建图标
let blueIcon = new BMap.Icon(
  'http://api.map.baidu.com/lbsapi/creatmap/images/us_mk_icon.png',
  new BMap.Size(23, 25),
  {
    offset: new BMap.Size(10, 2), // 指定定位位置
    imageOffset: new BMap.Size(0 - 1 * 23, 0 - 1 * 22.5), // 设置图片偏移使用左侧的图片
    //  imageOffset: new BMap.Size(-20, 0 - 1 * 25) // 设置图片偏移使用右侧的图片0-x*25代表使用第x+1张图片
  },
);
let map = {};
const CodePreview = ({ children }) => (
  <pre className={styles.pre}>
    <code>
      <Typography.Text copyable>{children}</Typography.Text>
    </code>
  </pre>
);

export default () => {
  const intl = useIntl();
  const mapRef = useRef();

  const getMap = () => {
    map = new BMap.Map('allMap', { mapType: BMAP_HYBRID_MAP }); // 创建Map实例
    map.centerAndZoom('北京', 9); // 初始化地图,设置中心点坐标和地图级别
    map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
    map.setCurrentCity('北京'); // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

    // console.log(props);
    // if (props.backImgList) {
    //   props.backImgList.map((item, index) => {
    //     item.backImgVo2s.map((equip,equipIndex) => {
    //       var pt = new BMap.Point(equip.x,equip.y);
    //       var marker = new BMap.Marker(pt, {
    //         icon: equip.type === 'FSM' ? blueIcon : redIcon
    //       })
    //       map.addOverlay(marker)
    //       rightClickMarker(marker, pt, item.backImgVO1, index, equipIndex)
    //     })
    //   })
    // }
  };
  useEffect(() => {
    getMap();
  }, []);
  return (
    <PageContainer>
      <div ref={mapRef}>
        <div
          id="allMap"
          style={{
            width: '80vw',
            height: '69vh',
          }}
        ></div>
      </div>
    </PageContainer>
  );
};
